<template>
  <div class="buscontaner">
    <div class="core-container" v-if="sellerInfo[0]">
      <div class="scroll-wrapper" ref="scroll">
        <div class="scroll-content">
          <div class="busTopbar">
            <div class="busTopbarherder">
              <div class="busTopbarherderbt">
                <h4>{{sellerInfo[0].name}}</h4>
                <app-stars :score="sellerInfo[0].score" size="48" :mr="5"></app-stars>
                <span>({{sellerInfo[0].serviceScore}})</span>
                <p>月售{{sellerInfo[0].sellCount}}单</p>
              </div>
              <div class="busTopbarherderRt">
                <i class="iconfont icon-ziyuan"></i>
                <p>已收藏</p>
              </div>
            </div>
            <div class="busTopbarFoot">
              <div class="busTopbarFootLeft">
                <span>起送价</span>
                <p>{{sellerInfo[0].minPrice}}元</p>
              </div>
              <div class="busTopbarFootLeft contentShop">
                <span>商家配送</span>
                <p>{{sellerInfo[0].deliveryPrice}}元</p>
              </div>
              <div class="busTopbarFootLeft">
                <span>平均配送时间</span>
                <p>{{sellerInfo[0].deliveryTime}}分钟</p>
              </div>
            </div>
          </div>
          <div class="busInfobar">
            <h4>公告与活动</h4>
            <p class="busInfobarP">
              {{sellerInfo[0].bulletin}}
            </p>
            <ul>
              <li v-for="(item,index) in sellerInfo[0].supports" :key="index">
                <img src="./img/decrease_4@2x.png" alt="" />
                <p>{{item.content}}</p>
              </li>
            </ul>
          </div>
          <div class="busImgInfo">
            <h4>商家实景</h4>
            <!-- 左右滚动 -->
            <div class="imglist">
              <div class="horizontal-container">
                <div class="scroll-wrapper2" ref="scrollI">
                  <div class="scroll-content">
                    <img v-for="(item,index) in sellerInfo[0].pics" :key="index" :src="item" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="busShopInfo">
            <h4>商家信息</h4>
            <ul>
              <li>该商家支持开发票，请在下单时填写好发票抬头</li>
              <li>品类：{{sellerInfo[0].category}}</li>
              <li>
                地址：{{sellerInfo[0].address}}
              </li>
              <li>营业时间：{{sellerInfo[0].workTime}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import stars from "../../components/stars/stars"
import {mapState} from "vuex"
import BScroll from "@better-scroll/core";
export default {
  name: "business",
  methods:{
    init() {
      this.bs = new BScroll(this.$refs.scroll, {
        click: true,
        probeType: 3 // listening scroll event
      })
      this.bs = new BScroll(this.$refs.scrollI, {
        scrollX: true,
        probeType: 3 // listening scroll event
      })
    }
  },
  computed:{
    ...mapState(["sellerInfo"])
  },
  components:{
    "app-stars":stars
  },
  mounted() {
    this.init();
  }
};
</script>

<style lang="less" scope>
.buscontaner {
  background-color: #f3f5f7;
  .busTopbar {
    border-bottom: 0.01rem solid #e7e8e9;
    margin-bottom: 0.32rem;
    background-color: white;
    .busTopbarherder {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 0.36rem;
      padding: 0.36rem 0;
      border-bottom: 0.01rem solid rgba(7, 17, 27, 0.1);
      .busTopbarherderbt {
        h4 {
          font-size: 0.28rem;
          color: rgb(7, 17, 27);
          line-height: 0.28rem;
          margin-bottom: 0.16rem;
        }
        .start {
          display: flex;
          align-items: center;
          margin-bottom: 0.36rem;
          height: 0.36rem;
          img {
            display:inline-block;
            height: 0.36rem;
            margin-right: 0.1rem;
          }
          span {
            margin: 0 0.24rem 0 0.06rem;
          }
          p {
            font-size: 0.2rem;
            color: rgb(77, 85, 93);
            line-height: 0.36rem;
          }
        }
      }
      .busTopbarherderRt {
        display: flex;
        flex-direction: column;
        align-items: center;
        i {
          font-size: 0.48rem;
          color: rgb(240, 20, 20);
          line-height: 0.48rem;
          margin-bottom: 0.08rem;
        }
        p {
          font-size: 0.2rem;
          color: rgb(77, 85, 93);
          line-height: 0.2rem;
        }
      }
    }
    .busTopbarFoot {
      padding: 0.36rem 0;
      display: flex;
      justify-content: space-evenly;
      .busTopbarFootLeft {
        span {
          font-size: 0.2rem;
          color: rgb(147, 153, 159);
          line-height: 0.2rem;
          margin-bottom: 0.08rem;
          flex: 1;
        }
        p {
          font-size: 0.48rem;
          font-weight: 200;
          color: rgb(7, 17, 27);
          line-height: 0.48rem;
        }
        &.contentShop {
          padding: 0 0.84rem;
          border-left: 0.01rem solid rgba(7, 17, 27, 0.1);
          border-right: 0.01rem solid rgba(7, 17, 27, 0.1);
        }
      }
    }
  }
  .busInfobar {
    padding: 0.36rem 0.36rem 0;
    margin-bottom: 0.32rem;
    border-bottom: 0.01rem solid #e7e8e9;
    background-color: white;
    h4 {
      margin-bottom: 0.16rem;
      font-size: 0.28rem;
      color: rgb(7, 17, 27);
      line-height: 0.28rem;
    }
    .busInfobarP {
      padding: 0 0.24rem 0.32rem;
      font-size: 0.24rem;
      font-weight: 200;
      color: rgb(240, 20, 20);
      line-height: 0.48rem;
    }
    ul {
      li {
        display: flex;
        padding: 0.32rem 0.24rem;
        border-top: 0.01rem solid rgba(7, 17, 27, 0.1);
        img {
          height: 0.32rem;
          margin-right: 0.12rem;
        }
        p {
          font-size: 0.24rem;
          font-weight: 200;
          color: rgb(7, 17, 27);
          line-height: 0.32rem;
        }
      }
    }
  }
  .busImgInfo {
    border-bottom: 0.01rem solid #e7e8e9;
    margin-bottom: 0.32rem;
    background-color: white;
    padding: 0.36rem;
    h4 {
      margin-bottom: 0.24rem;
    }
    .imglist {
      img {
        width: 1.8rem;
        height: 2.4rem;
        margin-left: 0.12rem;
        &:nth-child(1) {
          margin-left: 0;
        }
      }
    }
  }
  .busShopInfo {
    background-color: white;
    padding: 0.36rem;
    h4 {
      margin-bottom: 0.24rem;
    }
    ul {
      li {
        padding: 0.32rem 0.24rem;
        border-top: 0.01rem solid rgba(7, 17, 27, 0.1);
        font-size: 0.24rem;
        font-weight: 200;
        color: rgb(7, 17, 27);
        line-height: 0.32rem;
      }
    }
  }
}
h4 {
  font-size: 0.28rem;
  color: rgb(7, 17, 27);
  line-height: 0.28rem;
}
.core-container {
  .scroll-wrapper {
    height: 8.88rem;
    position: relative;
    overflow: hidden;
  }
}
.horizontal-container{
  .scroll-wrapper2{
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    .scroll-content{
      display: inline-block;
    }
  }
}
  
</style>